@import 'shared';

:local(.message-entry) {
  position: relative;
  margin: 10px 24px 24px 24px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--text-field-background-color);
  border: 1px solid var(--text-field-border-color);
  border-radius: 16px;
}

:local(.message-entry-disabled) {
  background-color: transparent;

  :local(.message-entry-button) {
    display: none;
  }
}

:local(.message-entry-input) {
  @extend %default-font;
  pointer-events: auto;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline-style: none;
  overflow: hidden;
  resize: none;
  background-color: transparent;
  color: var(--text-field-text-color);
  padding: 8px 1.25em;
  line-height: 28px;
  font-size: 1.1em;
  width: 100%;
  border: 0px;
  height: 32px;
  flex: 10;
}

:local(.message-entry-input)::placeholder{
  color: var(--text-field-placeholder-color);
  font-weight: 300;
  font-style: italic;
}

:local(.message-entry-button) {
  color: $action-label-color;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline-style: none;
  background-color: var(--text-field-background-color);
  min-width: 40px;
  height: 100%;
  bottom: 0px;
  border: 0px;
  font-size: 1.5em;
  cursor: pointer;
  margin: 0px 10px;
}

:local(.message-entry-spawn) {
  color: var(--overlay-text-field-widget-color);
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline-style: none;
  min-width: 40px;
  height: 100%;
  bottom: 0px;
  font-size: 1.5em;
  cursor: pointer;
  border: 0;
  background-color: transparent;
  margin: 0px;
}

:local(.message-entry-spawn):hover {
  color: $action-label-color;
}

:local(.message-entry-spawn):disabled {
  color: var(--text-field-disabled-color);
  background-color: transparent;
}

:local(.message-entry-button):disabled {
  color: var(--text-field-disabled-color);
  background-color: transparent;
}

:local(.message-entry-button-in-room) {
  color: var(--overlay-text-field-widget-color);
}

:local(.message-entry-button-in-room):hover {
  color: $action-label-color;
}

:local(.message-entry-upload) {
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:local(.message-entry-in-room) {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 95%;
  max-width: 700px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--overlay-text-field-background-color);
  border-radius: 16px;
  pointer-events: auto;
  transition: opacity 0.15s linear;

  :local(.message-entry-input-in-room) {
    color: var(--overlay-text-field-text-color);
    padding: 8px 0px;
    margin-left: 4px;
  }

  :local(.message-entry-input-no-spawn) {
    padding: 8px 1.25em;
  }

  :local(.message-entry-button-in-room) {
    border: 0;
    background-color: transparent;
    margin-right: 10px;
  }
}

:local(.message-entry-in-room):focus-within, :local(.message-entry-in-room):hover {
  transition: background-color 0.15s linear;
  background-color: var(--overlay-text-field-focused-background-color);

  :local(.message-entry-button-in-room) {
    border: 0;
    background-color: transparent;
  }
}

:local(.message-entry-on-mobile) {
  // Hide chatbox for joysticks
  // Orientation selector fails here when keyboard pops up on shorter screens
  @media (min-aspect-ratio: 15/9) {
    display: none;
  }
}
